import React from 'react';
import { List, Card, Row, Col, Breadcrumb, Typography, Space, Pagination } from 'antd';
import { StarOutlined, LikeOutlined, MessageOutlined, FieldTimeOutlined, DislikeOutlined, EyeOutlined } from '@ant-design/icons';
import { connect } from 'dva';
import { history } from 'umi';
const { Paragraph } = Typography;
const IconText = ({ icon, text }) => (
  <Space>
    {React.createElement(icon)}
    {text}
  </Space>
);

const FavoriteDetail = ({ articleList, total, dispatch }) => {
  const handlPage = (page, pageSize) => {
    dispatch({
      type: "favorite/queryCollectedArticle",
      payload: {
        page,
        pageSize,
      }
    })
  };
  return (
    <>
      <br />
      <Breadcrumb separator=">" style={{
        cursor: 'pointer', margin: '.4rem 0 0 2.1rem', fontSize: '.16rem', fontWeight: '600',
      }}>
        <Breadcrumb.Item onClick={() => { window.history.back(-1) }}>收藏夹列表</Breadcrumb.Item>
        <Breadcrumb.Item>收藏夹详情</Breadcrumb.Item>
      </Breadcrumb>
      <br />
      <Row><Col span={18} offset={3}>
        <List
          size="small"
          dataSource={articleList === null ? [] : articleList}
          renderItem={(item) => (
            <List.Item>
              <Card hoverable style={{ width: '100%', borderRadius: 10, }} onClick={() => {
                history.push({ pathname: '/homePage/articleDetail', state: { articleId: item.articleId } })
                dispatch({
                  type: 'homePage/viewArticle',
                  payload: {
                    articleId: item.articleId,
                  }
                })
              }}>
                <Card.Meta title={item.title} description={<Paragraph ellipsis={true}>{item.content.replace(/<[^>]*>?/gm, '')}</Paragraph>} />
                <Row>
                  <Col span={2}><IconText icon={StarOutlined} text={item.collectCount} key="list-vertical-star-o" /></Col>
                  <Col span={2} offset={1}><IconText icon={EyeOutlined} text={item.view} key="list-vertical-eye" /></Col>
                  <Col span={2} offset={1}><IconText icon={LikeOutlined} text={item.like} key="list-vertical-like-o" /></Col>
                  <Col span={2} offset={1}><IconText icon={DislikeOutlined} text={item.disLike} key="list-vertical-dislike-o" /></Col>
                  <Col span={2} offset={1}><IconText icon={MessageOutlined} text={item.commentCount} key="list-vertical-message" /></Col>
                  <Col span={4} offset={1}><IconText icon={FieldTimeOutlined} text={item.updateTime} key="list-vertical-updateTime" /></Col>
                </Row>
              </Card>
            </List.Item>
          )}
        />
      </Col></Row>
      <Col span={18} offset={3} style={{ textAlign: 'center', }} ><Pagination showQuickJumper showSizeChanger defaultCurrent={1} total={total} onChange={handlPage} /></Col>
    </>
  )
};
export default connect(({ favorite, user }) =>
({
  articleList: favorite.articleList,
  userInfo: user.userInfo
}))(FavoriteDetail);